<template>
<!--  0.导航栏-->
  <el-row :gutter="10">
    <el-col :span="7"></el-col>
    <el-col :span="9" style="">
      <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1" ><a href="/index">首页</a></el-menu-item>
        <el-menu-item index="2"><a href="/singer">歌手</a></el-menu-item>
        <el-menu-item index="3"><a href="/album">新碟</a></el-menu-item>
        <el-menu-item index="4">排行榜</el-menu-item>
        <el-menu-item index="5">分类歌单</el-menu-item>
        <el-menu-item index="6">电台</el-menu-item>
        <el-menu-item index="7">MV</el-menu-item>
        <el-menu-item index="8">数字专辑</el-menu-item>
      </el-menu>
    </el-col>
  </el-row>

  <!--  1.图片-->
<el-card id="bg">
<!--  <img src="/image/zhuti.png" style="width: 100%;height: 378px;">-->

</el-card>

<!--  中间的歌手、人名..-->
  <div style="width: 1300px;margin: 0 auto">
    <!--2.全部按钮 导航-->
    <el-row :gutter="10">
     <el-col :span="2">
       <router-link to="/index">
         <button style=" margin-top: 20px; border:0px ;width: 60px;height: 30px;color: #fff;background-color: #42b983">全部</button>
       </router-link>
     </el-col>

     <el-col :span="22">
       <el-menu style="text-decoration: none;margin:0px 12px 14px 0px;padding: 0 8px;" active-text-color="orange" default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
         <el-menu-item index="1">A</el-menu-item>
         <el-menu-item index="2">B</el-menu-item>
         <el-menu-item index="3">C</el-menu-item>
         <el-menu-item index="4">D</el-menu-item>
         <el-menu-item index="5">E</el-menu-item>
         <el-menu-item index="6">F</el-menu-item>
         <el-menu-item index="7">G</el-menu-item>
         <el-menu-item index="8">H</el-menu-item>
         <el-menu-item index="9">I</el-menu-item>
         <el-menu-item index="10">J</el-menu-item>
         <el-menu-item index="11">K</el-menu-item>
         <el-menu-item index="12">L</el-menu-item>
         <el-menu-item index="13">M</el-menu-item>
         <el-menu-item index="15">N</el-menu-item>
         <el-menu-item index="16">O</el-menu-item>
         <el-menu-item index="17">P</el-menu-item>
         <el-menu-item index="18">Q</el-menu-item>
         <el-menu-item index="19">R</el-menu-item>
         <el-menu-item index="20">S</el-menu-item>
         <el-menu-item index="21">T</el-menu-item>
         <el-menu-item index="22">U</el-menu-item>
         <el-menu-item index="23">V</el-menu-item>
         <el-menu-item index="24">W</el-menu-item>
         <el-menu-item index="25">X</el-menu-item>
         <el-menu-item index="26">Y</el-menu-item>
         <el-menu-item index="27">Z</el-menu-item>
         <el-menu-item index="14">#</el-menu-item>
       </el-menu>
     </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="2">
        <router-link to="/index">
          <button style=" margin-top: 20px; border:0px;padding:0 8px;width: 60px;height: 30px;color: #fff;background-color: #42b983">全部</button>
        </router-link>
      </el-col>

      <el-col :span="22">
        <el-menu style="margin:0px 12px 14px 0px;" active-text-color="orange" default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1">内地</el-menu-item>
          <el-menu-item index="2">港台</el-menu-item>
          <el-menu-item index="3">欧美</el-menu-item>
          <el-menu-item index="4">日本</el-menu-item>
          <el-menu-item index="5">韩国</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="2">
        <router-link to="/index">
          <button style=" margin-top: 20px; border:0px;padding: 0 8px; ;width: 60px;height: 30px;color: #fff;background-color: #42b983">全部</button>
        </router-link>
      </el-col>

      <el-col :span="22">
        <el-menu style="margin: 0px 12px 14px 0px" active-text-color="orange" default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1">男</el-menu-item>
          <el-menu-item index="2">女</el-menu-item>
          <el-menu-item index="3">组合</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="2">
        <router-link to="/index">
          <button style=" margin-top: 20px; border:0px ;width: 60px;height: 30px;color: #fff;background-color: #42b983">全部</button>
        </router-link>
      </el-col>

      <el-col :span="22">
        <el-menu style="margin: 0px 12px 14px 0px;padding: 0 8px;" active-text-color="orange" default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1">流行</el-menu-item>
          <el-menu-item index="2">说唱</el-menu-item>
          <el-menu-item index="3">国风</el-menu-item>
          <el-menu-item index="4">摇滚</el-menu-item>
          <el-menu-item index="5">电子</el-menu-item>
          <el-menu-item index="6">民谣</el-menu-item>
          <el-menu-item index="7">R&B</el-menu-item>
          <el-menu-item index="8">民族乐</el-menu-item>
          <el-menu-item index="9">轻音乐</el-menu-item>
          <el-menu-item index="10">爵士</el-menu-item>
          <el-menu-item index="11">古典</el-menu-item>
          <el-menu-item index="12">乡村</el-menu-item>
          <el-menu-item index="13">蓝调</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>



<!--  3.卡片歌手图片和名字-->
<el-row :gutter="10" style="margin: 0 ">
 <el-col :span="4.8">
    <el-card class="card-center-content" style="width: 240px;height: 204px;">
      <router-link to="/index" style="text-decoration: none;">
          <img src="/image/s1.png" class="circle-image">
           <p style="text-align: center;color: #333333;">周杰伦</p>
      </router-link>
    </el-card>
 </el-col>

  <el-col :span="4.8">
    <el-card class="card-center-content" style="width: 240px;height: 204px;">
      <router-link to="/index" style="text-decoration: none;">
        <img src="/image/s2.png" class="circle-image">
        <p style="text-align: center;color: #333333;">林俊杰</p>
      </router-link>
    </el-card>
  </el-col>
  <el-col :span="4.8">
    <el-card class="card-center-content" style="width: 240px;height: 204px;">
      <router-link to="/index" style="text-decoration: none;">
        <img src="/image/s3.png" class="circle-image">
        <p style="text-align: center;color: #333333;">G.E.M 邓紫棋</p>
      </router-link>
    </el-card>
  </el-col>
  <el-col :span="4.8">
    <el-card class="card-center-content" style="width: 240px;height: 204px;">
      <router-link to="/index" style="text-decoration: none;">
        <img src="/image/s4.png" class="circle-image">
        <p style="text-align: center;color: #333333;">薛之谦</p>
      </router-link>
    </el-card>
  </el-col>
  <el-col :span="4.8">
    <el-card class="card-center-content" style="width: 240px;height: 204px;">
      <router-link to="/index" style="text-decoration: none;">
        <img src="/image/s5.png" class="circle-image">
        <p style="text-align: center;color: #333333;">周深</p>
      </router-link>
    </el-card>
  </el-col>
  <el-col :span="4.8">
    <el-card class="card-center-content" style="width: 240px;height: 204px;">
      <router-link to="/index" style="text-decoration: none;">
        <img src="/image/s6.png" class="circle-image">
        <p style="text-align: center;color: #333333;">陈奕迅</p>
      </router-link>
    </el-card>
  </el-col>
  <el-col :span="4.8">
    <el-card class="card-center-content" style="width: 240px;height: 204px;">
      <router-link to="/index" style="text-decoration: none;">
        <img src="/image/s7.png" class="circle-image">
        <p style="text-align: center;color: #333333;">毛不易</p>
      </router-link>
    </el-card>
  </el-col>
  <el-col :span="4.8">
    <el-card class="card-center-content" style="width: 240px;height: 204px;">
      <router-link to="/index" style="text-decoration: none;">
        <img src="/image/s8.png" class="circle-image">
        <p style="text-align: center;color: #333333;">Taylor Swift</p>
      </router-link>
    </el-card>
  </el-col>
  <el-col :span="4.8">
    <el-card class="card-center-content" style="width: 240px;height: 204px;">
      <router-link to="/index" style="text-decoration: none;">
        <img src="/image/s9.png" class="circle-image">
        <p style="text-align: center;color: #333333;">汪苏泷</p>
      </router-link>
    </el-card>
  </el-col>
  <el-col :span="4.8">
    <el-card class="card-center-content" style="width: 240px;height: 204px;">
      <router-link to="/index" style="text-decoration: none;">
        <img src="/image/s10.png" class="circle-image">
        <p style="text-align: center;color: #333333;">王源</p>
      </router-link>
    </el-card>
  </el-col>











</el-row>
    
<!--    4.歌手名链接-->
    <el-row :gutter="10">
     <el-col :span="4.8" style="width: 240px;">
       <div class="singer-grid">
         <!-- 每个歌手名字用一个div包裹， -->
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">李宇春</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">王丽华</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">孙楠</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">王菲</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">古巨基</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">梁静茹</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">张学友</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">张远</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">李宇春</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">胡歌</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">李德华</router-link>
         </div>
         <!-- ... 其他歌手名字继续添加 -->
       </div>
     </el-col>

      <el-col :span="4.8" style="width: 240px;">
        <div class="singer-grid">
          <!-- 每个歌手名字用一个div包裹， -->
          <div class="singer-name">
            <router-link to="/index" style="text-decoration: none;  color:#333333">李宇春</router-link>
          </div>
          <div class="singer-name">
            <router-link to="/index" style="text-decoration: none;  color:#333333">王丽华</router-link>
          </div>
          <div class="singer-name">
            <router-link to="/index" style="text-decoration: none;  color:#333333">孙楠</router-link>
          </div>
          <div class="singer-name">
            <router-link to="/index" style="text-decoration: none;  color:#333333">王菲</router-link>
          </div>
          <div class="singer-name">
            <router-link to="/index" style="text-decoration: none;  color:#333333">古巨基</router-link>
          </div>
          <div class="singer-name">
            <router-link to="/index" style="text-decoration: none;  color:#333333">梁静茹</router-link>
          </div>
          <div class="singer-name">
            <router-link to="/index" style="text-decoration: none;  color:#333333">张学友</router-link>
          </div>
          <div class="singer-name">
            <router-link to="/index" style="text-decoration: none;  color:#333333">张远</router-link>
          </div>
          <div class="singer-name">
            <router-link to="/index" style="text-decoration: none;  color:#333333">李宇春</router-link>
          </div>
          <div class="singer-name">
            <router-link to="/index" style="text-decoration: none;  color:#333333">胡歌</router-link>
          </div>
          <div class="singer-name">
            <router-link to="/index" style="text-decoration: none;  color:#333333">李德华</router-link>
          </div>
          <!-- ... 其他歌手名字继续添加 -->
        </div>
      </el-col>

     <el-col :span="4.8">
       <div class="singer-grid">
         <!-- 每个歌手名字用一个div包裹， -->
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">李宇春</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">王丽华</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">孙楠</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">王菲</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">古巨基</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">梁静茹</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">张学友</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">张远</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">李宇春</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">胡歌</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">李德华</router-link>
         </div>
         <!-- ... 其他歌手名字继续添加 -->
       </div>
     </el-col>

     <el-col :span="4.8">
       <div class="singer-grid">
         <!-- 每个歌手名字用一个div包裹， -->
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">李宇春</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">王丽华</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">孙楠</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">王菲</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">古巨基</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">梁静茹</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">张学友</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">张远</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">李宇春</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">胡歌</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">李德华</router-link>
         </div>
         <!-- ... 其他歌手名字继续添加 -->
       </div>
     </el-col>

     <el-col :span="4.8">
       <div class="singer-grid">
         <!-- 每个歌手名字用一个div包裹， -->
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">李宇春</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">王丽华</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">孙楠</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">王菲</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">古巨基</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">梁静茹</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">张学友</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">张远</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">李宇春</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">胡歌</router-link>
         </div>
         <div class="singer-name">
           <router-link to="/index" style="text-decoration: none;  color:#333333">李德华</router-link>
         </div>
         <!-- ... 其他歌手名字继续添加 -->
       </div>
     </el-col>
    </el-row>

  </div>

</template>

<script setup>
</script>

<style scoped>
.card-center-content {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 224px;
  height: 245px; /* 可根据需要调整 */
  background-color: #fff; /* 确保背景色一致 */
  margin-top: 10px;
}

.card-center-content>p:hover {
  color: green;
}

.circle-image {
  border-radius: 50%;
  /* 确保图片不会失真，可以添加宽高来控制图片大小 */
  width: 140px;
  height: 140px;
  /* 如果图片尺寸不是正方形，可能需要添加object-fit属性来控制图片的填充方式 */
  object-fit: cover;
  margin: auto;

}

.singer-grid {
  width: 240px;
  margin: 0 6px;
  //font-size: 15px; /* 可以根据需要调整 */
  //text-align: left; /* 文本左边对齐 */
}

.singer-name {
  width: 100%;
  margin-top: 10px;
  padding-bottom: 10px;
  position: relative;
  left: 7px;

}

.el-menu-demo .is-active {
  color: green;
}

#bg{
  background-image: url("/public/image/zhuti1.png");
  width: 100%;
  height: 400px;
  display: flex;
  margin-bottom: 20px;
  object-fit: cover;
  background-repeat: no-repeat;
}
</style>